home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Mouseover Images / gradual-highlight.izs < prev    next >
Text File  |  2005-09-01  |  4KB  |  134 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Gradual Highlight Image Script
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+<!/BROWSER>
  7.  
  8. <!DESCRIPTION>A script that makes any image(s) appear dull before the mouse moves over it; as the mouse moves over it, the image gradually changes to its original appearance. Use it to instantly add stunning onMouseover effects to your menu images, for example.
  9. <!/DESCRIPTION> 
  10.  
  11. <!CATEGORY>mouseover images<!/CATEGORY>
  12.  
  13. <!SCRIPT>
  14. <!-- START OF SCRIPT -->
  15. <!-- Step 1: Insert the below into the <head> section of your page: -->
  16. <style type="text/css">
  17.  
  18. .gradualshine{
  19. filter:alpha(opacity=30);
  20. -moz-opacity:0.3;
  21. }
  22.  
  23. </style>
  24.  
  25. <script type="text/javascript">
  26.  
  27. /***********************************************
  28. * Gradual Highlight image script- ⌐ Dynamic Drive DHTML code library (www.dynamicdrive.com)
  29. * This notice MUST stay intact for legal use
  30. * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
  31. ***********************************************/
  32.  
  33. var baseopacity=30
  34.  
  35. function slowhigh(which2){
  36. imgobj=which2
  37. browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
  38. instantset(baseopacity)
  39. highlighting=setInterval("gradualfade(imgobj)",50)
  40. }
  41.  
  42. function slowlow(which2){
  43. cleartimer()
  44. instantset(baseopacity)
  45. }
  46.  
  47. function instantset(degree){
  48. if (browserdetect=="mozilla")
  49. imgobj.style.MozOpacity=degree/100
  50. else if (browserdetect=="ie")
  51. imgobj.filters.alpha.opacity=degree
  52. }
  53.  
  54. function cleartimer(){
  55. if (window.highlighting) clearInterval(highlighting)
  56. }
  57.  
  58. function gradualfade(cur2){
  59. if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
  60. cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
  61. else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
  62. cur2.filters.alpha.opacity+=10
  63. else if (window.highlighting)
  64. clearInterval(highlighting)
  65. }
  66.  
  67. </script>
  68. <!-- Step 2: Then, insert the below inside the <img> tag of all of the images you want the effect applied to: -->
  69. <a href="whatever.htm"><img src="mygif.gif" border=0 class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"></a>
  70. <!-- END OF SCRIPT -->
  71. <!/SCRIPT>
  72.  
  73. <!PREVIEW>
  74. <!-- START OF SCRIPT -->
  75.  
  76. <!-- Step 1: Insert the below into the <head> section of your page: -->
  77. <style type="text/css">
  78.  
  79. .gradualshine{
  80. filter:alpha(opacity=30);
  81. -moz-opacity:0.3;
  82. }
  83.  
  84. </style>
  85.  
  86. <script type="text/javascript">
  87.  
  88. /***********************************************
  89. * Gradual Highlight image script- ⌐ Dynamic Drive DHTML code library (www.dynamicdrive.com)
  90. * This notice MUST stay intact for legal use
  91. * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
  92. ***********************************************/
  93.  
  94. var baseopacity=30
  95.  
  96. function slowhigh(which2){
  97. imgobj=which2
  98. browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
  99. instantset(baseopacity)
  100. highlighting=setInterval("gradualfade(imgobj)",50)
  101. }
  102.  
  103. function slowlow(which2){
  104. cleartimer()
  105. instantset(baseopacity)
  106. }
  107.  
  108. function instantset(degree){
  109. if (browserdetect=="mozilla")
  110. imgobj.style.MozOpacity=degree/100
  111. else if (browserdetect=="ie")
  112. imgobj.filters.alpha.opacity=degree
  113. }
  114.  
  115. function cleartimer(){
  116. if (window.highlighting) clearInterval(highlighting)
  117. }
  118.  
  119. function gradualfade(cur2){
  120. if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
  121. cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
  122. else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
  123. cur2.filters.alpha.opacity+=10
  124. else if (window.highlighting)
  125. clearInterval(highlighting)
  126. }
  127.  
  128. </script>
  129. <!-- Step 2: Then, insert the below inside the <img> tag of all of the images you want the effect applied to: -->
  130. <a href="whatever.htm"><img src="mygif.gif" border=0 class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"></a>
  131. <!-- END OF SCRIPT -->
  132. <!/PREVIEW>
  133.  
  134. <!RELATED>NONE<!/RELATED>